let mediaRecorder;
let audioChunks = [];
let recordingTimeout;
const MAX_RECORDING_TIME = 30000; // 30秒

// API基础URL
const API_BASE_URL = 'http://localhost:8080/api';

const recordButton = document.getElementById('recordButton');
const resultDiv = document.getElementById('result');
const loadingDiv = document.getElementById('loading');
const statusIndicator = document.querySelector('.status-indicator');

// 初始化录音功能
async function initializeRecording() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        mediaRecorder = new MediaRecorder(stream);

        mediaRecorder.ondataavailable = (event) => {
            audioChunks.push(event.data);
        };

        mediaRecorder.onstop = async () => {
            const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
            await sendAudioToServer(audioBlob);
        };

        // 麦克风权限获取成功
        statusIndicator.style.backgroundColor = '#22c55e';
        statusIndicator.title = '麦克风已就绪';
    } catch (err) {
        console.error('Error accessing microphone:', err);
        statusIndicator.style.backgroundColor = '#ef4444';
        statusIndicator.title = '无法访问麦克风';
        showError('无法访问麦克风，请确保已授予权限');
    }
}

// 发送音频到服务器
async function sendAudioToServer(audioBlob) {
    loadingDiv.classList.add('active');
    const formData = new FormData();
    formData.append('audio', audioBlob);

    try {
        await fetch(`${API_BASE_URL}/audio/transcribe`, {
            method: 'POST',
            body: formData
        });
    } catch (err) {
        console.error('Error sending audio:', err);
        loadingDiv.classList.remove('active');
        showError('发送音频失败，请重试');
    }
}

// 显示错误信息
function showError(message) {
    const errorDiv = document.createElement('div');
    errorDiv.style.cssText = `
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: #fee2e2;
        color: #dc2626;
        padding: 12px 24px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.1);
        z-index: 1000;
        animation: slideDown 0.3s ease;
    `;
    errorDiv.textContent = message;
    document.body.appendChild(errorDiv);

    setTimeout(() => {
        errorDiv.style.animation = 'slideUp 0.3s ease';
        setTimeout(() => errorDiv.remove(), 300);
    }, 3000);
}

// 创建并触发链接点击
function openUrlSafely(url) {
    // 创建一个临时的a标签
    const link = document.createElement('a');
    link.href = url;
    link.target = '_blank';
    link.rel = 'noopener noreferrer';
    link.style.display = 'none';
    document.body.appendChild(link);
    
    // 模拟点击
    link.click();
    
    // 清理DOM
    setTimeout(() => {
        document.body.removeChild(link);
    }, 100);
}

// 设置Server-Sent Events监听
function setupSSE() {
    const eventSource = new EventSource(`${API_BASE_URL}/audio/stream`);
    
    eventSource.onmessage = (event) => {
        loadingDiv.classList.remove('active');
        try {
            // 尝试解析JSON
            const data = JSON.parse(event.data);
            
            // 如果是包含action和url的JSON对象
            if (data.action == 'openUrl' && data.url) {
                openUrlSafely(data.url);
            } else if (data.action === 'showText' && data.text) {
                // 显示转写的文本
                resultDiv.textContent = data.text;
            } else if (data.action === 'error') {
                // 显示错误信息
                showError(data.message || '处理过程中发生错误');
            } else {
                // 如果是其他类型的JSON，显示其内容
                resultDiv.textContent = JSON.stringify(data, null, 2);
            }
        } catch (e) {
            // 如果不是JSON，按普通文本显示
            resultDiv.textContent = event.data;
        }
        resultDiv.style.animation = 'fadeIn 0.5s ease';
    };

    eventSource.onerror = (error) => {
        console.error('SSE Error:', error);
        loadingDiv.classList.remove('active');
        eventSource.close();
        showError('与服务器的连接已断开，请刷新页面重试');
    };
}

// 添加动画样式
const style = document.createElement('style');
style.textContent = `
    @keyframes slideDown {
        from { transform: translate(-50%, -100%); opacity: 0; }
        to { transform: translate(-50%, 0); opacity: 1; }
    }
    @keyframes slideUp {
        from { transform: translate(-50%, 0); opacity: 1; }
        to { transform: translate(-50%, -100%); opacity: 0; }
    }
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
`;
document.head.appendChild(style);

// 初始化页面
document.addEventListener('DOMContentLoaded', () => {
    initializeRecording();
    setupSSE();

    // 按住开始录音
    recordButton.addEventListener('mousedown', () => {
        audioChunks = [];
        mediaRecorder.start();
        recordButton.innerHTML = '录音中';
        recordButton.style.animation = 'pulse 2s infinite';
        
        // 设置30秒后自动停止
        recordingTimeout = setTimeout(() => {
            if (mediaRecorder.state === 'recording') {
                mediaRecorder.stop();
                recordButton.innerHTML = '🎤';
                recordButton.style.animation = '';
            }
        }, MAX_RECORDING_TIME);
    });

    // 松开结束录音
    recordButton.addEventListener('mouseup', () => {
        if (mediaRecorder.state === 'recording') {
            clearTimeout(recordingTimeout);
            mediaRecorder.stop();
            recordButton.innerHTML = '🎤';
            recordButton.style.animation = '';
        }
    });

    // 如果鼠标移出按钮，也要停止录音
    recordButton.addEventListener('mouseleave', () => {
        if (mediaRecorder.state === 'recording') {
            clearTimeout(recordingTimeout);
            mediaRecorder.stop();
            recordButton.innerHTML = '🎤';
            recordButton.style.animation = '';
        }
    });

    // 初始化按钮文本
    recordButton.innerHTML = '🎤';
}); 
